<template>
  <div class="stall">

    <!--S顶部-->
    <roof
      :show-left-capsule="true"
      title="列表范德萨覅大幅发的啥克里夫">
    </roof>
    <!--E顶部-->

    <!--S内容-->
    <div id="content" :style="{'padding-top':content_padding_top+'px'}">
      <scroll-view
        class="scroll"
        :scroll-y="true"
      >
        <!--S头部门店信息-->
        <div id="header" class="chunk">
          <img mode="aspectFit" class="logo" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1522975998,2599281021&fm=26&gp=0.jpg" />
          <div class="name">小龙坎老火锅（临汾福利店）</div>
          <div class="type">门店</div>
          <div class="tel" @click="callStall">
            <i class="iconfont icon-dianhua"></i>联系商家
            <!--联系摊主-->
          </div>
          <div class="address">尧都区福利巷中段思麦尔新天地对面，距您10.2km</div>
          <div class="time">
            <span>营业中</span><span>10:30-22:30</span>
          </div>
          <div class="scope">
            <p>火锅</p><p>虾滑</p><p>刷羊肉</p><p>烧烤</p><p>啤酒</p>
          </div>
        </div>
        <!--E头部门店信息-->

        <!--S门店商品相册-->
        <div id="stall-photo" class="chunk">
          <h2><a hover-class="none" href="/pages/stall-photo/main?stall_id=1">商家相册<i class="iconfont icon-you"></i></a></h2>
          <div class="list">
            <scroll-view
              class="list-scroll"
              :scroll-x="true">
              <dl>
                <dt><img mode="aspectFill" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2865360978,4286890199&fm=15&gp=0.jpg" /></dt>
                <dd>虾滑虾滑虾滑虾滑虾滑虾滑虾滑</dd>
              </dl>
              <dl>
                <dt><img mode="aspectFill" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2865360978,4286890199&fm=15&gp=0.jpg" /></dt>
                <dd>虾滑</dd>
              </dl>
              <dl>
                <dt><img mode="aspectFill" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2865360978,4286890199&fm=15&gp=0.jpg" /></dt>
                <dd>虾滑</dd>
              </dl>
              <dl>
                <dt><img mode="aspectFill" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2865360978,4286890199&fm=15&gp=0.jpg" /></dt>
                <dd>虾滑</dd>
              </dl>
              <dl>
                <dt><img mode="aspectFill" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2865360978,4286890199&fm=15&gp=0.jpg" /></dt>
                <dd>虾滑</dd>
              </dl>
              <dl>
                <dt><img mode="aspectFill" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2865360978,4286890199&fm=15&gp=0.jpg" /></dt>
                <dd>虾滑</dd>
              </dl>
              <dl>
                <dt><img mode="aspectFill" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2865360978,4286890199&fm=15&gp=0.jpg" /></dt>
                <dd>虾滑</dd>
              </dl>
              <dl>
                <dt><img mode="aspectFill" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2865360978,4286890199&fm=15&gp=0.jpg" /></dt>
                <dd>虾滑</dd>
              </dl>
              <dl>
                <dt><img mode="aspectFill" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2865360978,4286890199&fm=15&gp=0.jpg" /></dt>
                <dd>虾滑</dd>
              </dl>
            </scroll-view>
          </div>
        </div>
        <!--E门店商品相册-->

        <!--S门店卡券列表-->
        <div id="coupon" class="chunk">
          <h2><a hover-class="none" href="/pages/stall-coupon/main?stall_id=0">优惠卡券<i class="iconfont icon-you"></i></a></h2>
          <div class="list">
            <coupon-list></coupon-list>
          </div>
        </div>
        <!--E门店卡券列表-->

        <!--S相关圈子-->
        <div id="circle" class="chunk">
          <h2>相关圈子<i class="iconfont icon-you"></i></h2>
          <circle-list
            :show-stall="false"
            :show-location="false"
            :sheet_index="sheet_options.index"
            @click-control="clickControl"
          ></circle-list>
        </div>
        <!--E相关圈子-->

        <!--S相关附近的门店-->
        <div id="near" class="chunk">
          <h2>附近门店</h2>
          <stall-list></stall-list>
        </div>
        <!--E相关附近的门店-->

      </scroll-view>
    </div>
    <!--E内容-->

    <!--S前往消费按钮-->
    <div id="footer">
      <i class="iconfont icon-daohang"></i>前往消费
    </div>
    <!--E前往消费按钮-->

    <!--S上拉菜单-->
    <action-sheet
      :show="sheet_options.show"
      :options="sheet_options.data"
      @select="selectActionSheet"
      @cancel="sheet_options.show = false"
    ></action-sheet>
    <!--E上拉菜单-->

  </div>
</template>

<script>
  import store from '../../store/index'
  import roof from '../../components/roof/Roof'
  import circleList from '../../components/circle-list/CircleList'
  import actionSheet from '../../components/action-sheet/ActionSheet'
  import stallList from '../../components/stall-list/StallList'
  import couponList from '../../components/coupon-list/CouponList'
  export default{
    data () {
      return {
        // 顶部填充区域高度
        content_padding_top: 0,
        // 胶囊高度
        capsule_height: 0,
        // 地摊门店id
        stall_id: 0,
        // 上拉菜单
        sheet_options: {
          data: [],
          show: false,
          index: -1
        }
      }
    },
    computed: {
      // 设备信息
      systemInfo () {
        return store.state.systemInfo
      },
      // 胶囊位置信息
      capsulePosition () {
        return store.state.capsule
      }
    },
    components: {
      roof,
      'circle-list': circleList,
      'action-sheet': actionSheet,
      'stall-list': stallList,
      'coupon-list': couponList
    },
    onLoad (options) {
      this.stall_id = options.stall_id
    },
    mounted () {
      this.setCapsuleHeight()
      this.setContentPaddingTop()
    },
    methods: {
      // Run
      /**
       * 设置胶囊的高度
       */
      setCapsuleHeight () {
        this.capsule_height = this.capsulePosition.height + ((this.capsulePosition.top - this.systemInfo.statusBarHeight) * 2)
      },
      /**
       * 设置内容区域的padding-top
       */
      setContentPaddingTop () {
        this.content_padding_top = this.systemInfo.statusBarHeight + this.capsule_height
      },

      // Handle
      /**
       * 联系商家拨打电话
       */
      callStall () {
        mpvue.makePhoneCall({
          phoneNumber: '13152972585'
        })
      },
      /**
       * 点击圈子右上角显示上拉菜单
       */
      clickControl (options) {
        this.sheet_options.data = options
        this.sheet_options.show = true
      },
      /**
       * 点击选择了下拉菜单
       * @param index
       */
      selectActionSheet (index) {
        this.sheet_options.index = index
        setTimeout(() => {
          this.sheet_options.index = -1
        }, 100)
      }
    }
  }
</script>
<style scoped lang="less" src="./index.less"></style>
